<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    <div id="pagiRoot"></div>
    <div id="tableRoot"></div>

    <script src="../../../tools/mathtool.js"></script>
    <script src="../../../tools/data_structure.js"></script>
    <script src="../../../tools/styletool.js"></script>
    <script src="../../../tools/mytable.js"></script>

    <script>
        class Paginator {
            constructor(root) {
                this.root = root

                // 绘制基本元素
                this.renderBasic()
            }

            /* 绘制基本元素 */
            renderBasic() {
                this.root.innerHTML = ` 
                <div class="container"
                    style="padding: 0px; width: 800px; height: 40px; border: 1px solid rgb(51, 51, 51); margin: 30px auto; display: flex; justify-content: center; align-items: center;">
                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnFirst" disabled="false">first</div>
                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnPrev" disabled="false">prev</div>

                    <div style="display: flex; justify-content: center; align-items: center;" class="pagers">
                    </div>

                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnNext" disabled="false">next</div>
                    <div style="border: 1px solid rgb(51, 51, 51); padding: 0px 5px; margin: 0px 5px; background-color: rgb(255, 255, 255);"
                        id="btnLast" disabled="false">last</div>
                    <input type="number" style="outline: none; width: 50px; height: 20px;">
                    <button style="outline: none; width: 30px; height: 24px; margin-left: 5px;">go</button>
                </div>                               
                `
            }
        }
    </script>

    <script>
        /* 造1234条学生数据 */
        const students = createStudents(1234)
        console.log(students);

        const mt = new MyTable(
            tableRoot,
            students,
            {
                thead: ["ID", "姓名", "年龄", "性别", "班级", "薪水"],

                // 使用使用默认布局（布局+样式）
                useDefaultLayout: true,

                // 每页显示的数据条数
                pageNum: 10
            }
        )

        const pg = new Paginator(pagiRoot)

    </script>

</body>

</html>